<script>

export default {
  name: "Header",
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem('CurUser'))
    }
  },
  props: {
    iscollapse: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    collapse() {
      this.$emit('docollapse');
    },
    toLogin() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
          .then(() => {
            this.$message({
              type: 'success',
              message: '退出登录成功'
            })
            this.$router.push('/');
            sessionStorage.clear()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出登录'
            })
          })
    },
    toUser() {
      this.$router.push("/Home")
    }
  }
}
</script>

<template>
  <div style="display: flex;line-height: 60px;">
    <div>

      <el-icon style="font-size: 20px;" @click="collapse">
        <Expand/>
      </el-icon>

    </div>


    <div style="flex: 1;text-align: center;font-size: 30px;">
      <span style="font-size: 55px;font-weight: bold;margin-left: 100px">欢迎来到仓库管理系统</span>
    </div>

    <div style="align-items: center; margin-left: 10px; min-width: 120px; flex-shrink: 0;">
      <span>{{ user.name }}</span>
      <el-dropdown trigger="click">
        <el-icon style="margin-left: 5px;margin-top: 22px">
          <ArrowDownBold/>
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="toUser">个人中心</el-dropdown-item>
            <el-dropdown-item @click="toLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
